@let card = content.card;
@let component = card.components[0];
<div class="backdrop" (click)="onClose()"></div>
<div class="showcase">
  <app-card-1v1 [content]="card" />
  <div class="showcase-footer flex flex-row justify-between items-center">
    <div class="title flex items-center gap-2">
      {{ content.title }}
      @if (user$ | async) {
        <span class="text-gray-400 text-sm"> {{ component.uuid }} </span>
      }
    </div>
    <div class="actions flex">
      <app-btn
        (click)="onCopy(component.content)"
        [matTooltip]="'复制 JSON'"
        matTooltipPosition="above"
        [content]="{
          label: '',
          color: 'primary',
          mode: 'icon',
          icon: { svg: 'content-copy', inline: true },
        }"
      />
      <app-btn
        (click)="showCode(component)"
        [matTooltip]="'查看 JSON'"
        matTooltipPosition="above"
        [content]="{
          label: '',
          color: 'primary',
          mode: 'icon',
          icon: { svg: 'code-json', inline: true },
        }"
      />
      <app-btn
        (click)="insert(component.content)"
        [matTooltip]="'插入组件到编辑区'"
        matTooltipPosition="above"
        [content]="{
          label: '',
          color: 'primary',
          mode: 'icon',
          icon: { svg: 'arrow-right', inline: true },
        }"
      />
    </div>
  </div>
</div>
